<script lang="ts" setup>
import { getAbilityDetail, } from '@/utils/data'
import { detailDatass, abilityFunctions, useExamples, relatedCases } from './detail'
import { useRoute, useRouter } from 'vue-router'
import { currencyFormatter } from '@/utils/content/number'

const route = useRoute()
const router = useRouter()
const navList = ref<any>([
  { id: 1, name: '能力介绍', isActive: true, href: '#ability-intro', isShow: false },
  { id: 2, name: '能力优势', isActive: false, href: '#ability-advantages', isShow: false },
  { id: 3, name: '能力功能', isActive: false, href: '#ability-functions', isShow: true },
  { id: 4, name: '使用场景', isActive: false, href: '#ability-use-cases', isShow: false },
  { id: 5, name: '使用案例', isActive: false, href: '#ability-use-examples', isShow: true },
  { id: 6, name: '服务列表', isActive: false, href: '#ability-service-list', isShow: false },
  { id: 7, name: '附件下载', isActive: false, href: '#ability-use-guide', isShow: false },
  // { id: 7, name: '评价详情', isActive: false, href: '#ability-comment', isShow: false },
  { id: 8, name: '关联解决方案', isActive: false, href: '#ability-related-case', isShow: true },
  { id: 9, name: '操作记录', isActive: false, href: '#ability-review-record', isShow: false }
])

const showTopBtn = ref(false)
const activeMenu = ref(1)
const detailDatas = ref<any>({

})
const abilityParents = ref()
const abilityOutput = ref('')
const showContent = ref(true)
const loading = ref(false)
const orderType = ref('')
const specifics = ref('')
const periods = ref('')
const useGuideSuffix = ref('')
const orderTypesEmun = ref([])
const specificsEmun = ref([])
const periodsEmun = ref([])
const levelEmun = ref([])
const totalPrice = ref<any>(0)
const unit = ref('')
const hasComments = ref(false)
const reviewRecord = ref([])
const deliveryType = ref('')
const code = ref('')

const getComments = (val) => {
  hasComments.value = val
  navList[5].isShow = val
}
const changeOrderType = (val) => {
  orderType.value = val
  // 选中规格，更新价格
  if (val === '按阶梯') {
    totalPrice.value = '-'
    unit.value = ''
  }
  if (val === '按次数') {
    specificsEmun.value = detailDatas.value.salesModels['按次数']
    specifics.value = detailDatas.value.salesModels['按次数'][0].id
    totalPrice.value = detailDatas.value.salesModels['按次数'][0].salesPrice
    unit.value = detailDatas.value.salesModels['按次数'][0].unit
  }
  if (val === '按周期') {
    periodsEmun.value = detailDatas.value.salesModels['按周期']
    periods.value = detailDatas.value.salesModels['按周期'][0].id
    totalPrice.value = detailDatas.value.salesModels['按周期'][0].salesPrice
    unit.value = detailDatas.value.salesModels['按周期'][0].unit
  }
}
const changeSpecifics = (val) => {
  specifics.value = val.id
  totalPrice.value = val.salesPrice
  unit.value = val.unit
}
const changePeriods = (val) => {
  periods.value = val.id
  totalPrice.value = val.salesPrice
  unit.value = val.unit
}
const addCartOrBuy = async (isBuy) => {
  window.location = `http://10.12.6.88/demo/main/accesspull?abilityId=${route.params.id}`
  // 判断是否登录
  // if (!$store.getters.isLogin) {
  //   window.location = `/login?redirect=${$route.fullPath}`
  //   return
  // }
  // loading.value = true

  const req = {
    // 'price': totalPrice,
    // 'productDescription': detailDatas.abilityDescription,
    productId: detailDatas.value.id,
    // 'productName': detailDatas.abilityName,
    productType: '0',
    // 'quantity': 1,
    skuId:
      orderType.value === '按次数'
        ? specifics
        : orderType.value === '按周期'
          ? periods
          : orderType.value === '按阶梯'
            ? levelEmun[0].id
            : ''
    // 'salesModel': orderType,
    // 'salesSpecifications': ,
  }
  // 向后端发送数据
  // const ret = await addCart(req)
  // if (ret.retCode === '000000') {
  //   // await $store.dispatch('addToCart', req)
  //   // if (isBuy) {
  //   //   await $router.push(`/cart?id=${detailDatas.id}`)
  //   // } else {
  //   //   $message.success('成功加入购物车')
  //   // }
  //   loading.value = false
  // } else {
  //   loading.value = false
  //   ElMessage.error(ret.retMsg)
  // }
}
const gotoCart = () => {
  router.push('/cart')
}
const handleScroll = () => {
  // nextTick(() => {
  //   const scrollHeight = $parent.$refs.rootLayout.scrollTop
  //   showTopBtn = scrollHeight > 100
  //   if ($refs.abilityDetails) {
  //     const rect = $refs.abilityDetails.getBoundingClientRect()
  //     // console.log(rect)
  //     const distanceToTop = rect.top
  //     if (distanceToTop <= 50) {
  //       if ($refs.abilityDetailNavs) {
  //         $refs.abilityDetailNavs.style.position = 'fixed'
  //         $refs.abilityDetailNavs.style.top = '0'
  //       }
  //     } else {
  //       if ($refs.abilityDetailNavs) {
  //         $refs.abilityDetailNavs.style.position = 'static'
  //       }
  //     }
  //   }
  // })
}
const toTop = () => {
  // $nextTick(() => {
  //   const parentElement = $parent.$refs.rootLayout
  //   parentElement.scrollTo({
  //     top: 0,
  //     left: 0,
  //     behavior: 'smooth'
  //   })
  // })
}
const toggleActive = (item) => {
  // 将navList中的isActive全部设置为false
  navList.value.forEach((items) => (items.isActive = false))
  item.isActive = !item.isActive
}
const abilityMouseover = (id) => {
  const children = abilityParents.value.querySelectorAll('.ability-use-case')
  if (!children[id].classList.contains('active')) {
    // 清空其他已有active
    const activeChildren = abilityParents.value.querySelectorAll('.ability-use-case.active')
    activeChildren.forEach((child) => {
      child.classList.remove('active')
    })
    children[id].classList.add('active')
  }
}

const getImagePath = computed(() => {
  return function (index) {
    // return require(`../../../assets/image/ability/detail/a${index + 1}.png`)
    return new URL(`../../../assets/image/ability/detail/a${index + 1}.png`, import.meta.url).href
  }
})
const useGuideFormatter = computed(() => {
  // return function (type) {
  // console.log(type)
  //   return type === 'pdf'
  //     ? require(`../../../assets/image/ability/detail/pdf.png`)
  //     : type === 'doc' || type === 'docx'
  //       ? require(`../../../assets/image/ability/detail/word.png`)
  //       : type === 'zip' || type === 'rar'
  //         ? require(`../../../assets/image/ability/detail/zip.png`)
  //         : ''
  // }
})
const getDefaultItemImage = computed(() => {
  // return require(`../../assets/image/public/caseorabilitydefault.jpg`)
})

onMounted(async () => {
  // $parent.$refs.rootLayout.addEventListener('scroll', handleScroll, true)
  // handleScroll()
  const fakeData = await getAbilityDetail(route.params.id)
  console.log('fakeData', fakeData)
  // const ret = await getAbilityDetail(route.params.id)
  const ret = { retCode: '000000',detailVo: fakeData,retMsg:'Success'}
  if (ret.retCode === '000000' && ret.retMsg !== '未查到相关数据') {
    showContent.value = true
    detailDatas.value = ret.detailVo
    // 评审记录
    reviewRecord.value = ret.detailVo.reviewList.reverse()
    if (ret.detailVo.reviewList && ret.detailVo.reviewList.length) {
      navList.value = navList.value.map(item => {
        if(item.id === 9) {
          item.isShow = true
        }
        return item;
      })
    }
    deliveryType.value = detailDatas.value.outputTagList.map(item=>item.tagName).join('、')
    // await getAbilityPackageById(ret.detailVo.abilityId)
    // 使用指南后缀
    useGuideSuffix.value = ret.detailVo.useGuide ? ret.detailVo.useGuide.split('.')[1] : 'pdf'
    abilityOutput.value = ret.detailVo.outputTagList.length !== 0 ? ret.detailVo.outputTagList.map((item) => item.tagName).join('、') : []
    // 处理salesModel
    const salesModesKeys = Object.keys(detailDatas.value.salesModels ? detailDatas.value.salesModels : [])
    if (salesModesKeys.length !== 0) {
      orderTypesEmun.value = salesModesKeys
      // 选中第一个
      orderType.value = orderTypesEmun.value[0]
      // console.log(orderTypesEmun)
      if (orderType.value === '按阶梯') {
        totalPrice.value = '-'
        unit.value = ''
      } else {
        totalPrice.value = detailDatas.value.salesModels[orderType.value][0].salesPrice
        unit.value = detailDatas.value.salesModels[orderType.value][0].unit
      }
      if (salesModesKeys.includes('按次数')) {
        specificsEmun.value = detailDatas.value.salesModels['按次数']
        specifics.value = detailDatas.value.salesModels['按次数'][0].id
      }
      if (salesModesKeys.includes('按周期')) {
        periodsEmun.value = detailDatas.value.salesModels['按周期']
        periods.value = detailDatas.value.salesModels['按周期'][0].id
      }
      if (salesModesKeys.includes('按阶梯')) {
        levelEmun.value = detailDatas.value.salesModels['按阶梯']
      }
    }
    const properties = ['abilityDescription', 'advantagesList', '','usescenarioList', '','serviceList', 'useGuide','']
    for (let i = 0; i < properties.length; i++) {
      if(properties[i]!==''){
        const property = properties[i]
        navList.value[i].isShow = detailDatas.value[property] && detailDatas.value[property].length !== 0
      }
    }
    navList.value = navList.value.filter((item) => item.isShow)
    // console.log(navList)
  } else {
    showContent.value = false
  }
})
</script>

<template>
  <div>
    <el-empty description="暂无数据" v-if="!showContent"></el-empty>
    <div v-else class="ability-detail-container" ref="container">
      <div class="mar-center">
        <div class="ability-breadcums">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item to="/ability">能力地图</el-breadcrumb-item>
            <el-breadcrumb-item v-if="detailDatas.classificationTag">{{ detailDatas.classificationTag.tagName }} </el-breadcrumb-item>
            <el-breadcrumb-item>{{ detailDatas.abilityName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="ability-new-content">
          <div class="ability-left">
            <div class="ability-main">
              <div class="ability-image-area">
                <img :src="detailDatas.imageUrl || getDefaultItemImage" alt="" />
              </div>
              <div class="ability-main-content">
                <h3 class="ability-name">{{ detailDatas.abilityName }}
                  <el-tag type="primary" class="top-tag">通用能力</el-tag><el-tag type="primary" class="top-tag">教育</el-tag><el-tag type="primary" class="top-tag">API类</el-tag><el-tag type="primary" class="top-tag">HOT</el-tag></h3>
                <p class="ability-desc" v-html="detailDatas.abilityAbstract"> </p>
                                <div class="ability-delivers">
                                  <span>交付方式：{{deliveryType}}</span>
                                  <span>统一码号：{{ detailDatas.code?detailDatas.code:'-' }}</span>
                                </div>
                <div class="ability-prices" v-if="specificsEmun.length !== 0 || periodsEmun.length !== 0 || levelEmun.length !== 0">
                  <span>价格：</span>
<!--                  <span>{{ currencyFormatter(totalPrice) }}</span>-->
                  <span>-</span>
                  <span>元</span>
                </div>
                <div class="ability-models order-models" v-if="orderTypesEmun.length !== 0">
                  <div class="ability-model-name">订购模式：</div>
                  <div class="ability-models-container">
                    <span
                      class="ability-model-item"
                      :class="{ active: orderType === item }"
                      @click="changeOrderType(item)"
                      v-for="(item, index) in orderTypesEmun"
                      :key="index"
                      >{{ item }}</span
                    >
                  </div>
                </div>
                <div class="ability-models" v-if="orderType === '按次数' && specificsEmun.length !== 0">
                  <div class="ability-model-name">规格：</div>
                  <div class="ability-models-container">
                    <span
                      class="ability-model-item"
                      :class="{ active: specifics === item.id }"
                      @click="changeSpecifics(item)"
                      v-for="(item, index) in specificsEmun"
                      :key="index"
                      >{{ item.salesSpecifications }}{{ item.unit }}</span
                    >
                  </div>
                </div>
                <div class="ability-models" v-if="orderType === '按周期' && periodsEmun.length !== 0">
                  <div class="ability-model-name">按时间周期计费：</div>
                  <div class="ability-models-container">
                    <span
                      class="ability-model-item"
                      :class="{ active: periods === item.id }"
                      @click="changePeriods(item)"
                      v-for="(item, index) in periodsEmun"
                      :key="index"
                      >{{ item.salesSpecifications }}{{ item.unit }}</span
                    >
                  </div>
                </div>
                <div class="ability-models" v-if="orderType === '按阶梯' && levelEmun.length !== 0">
                  <div class="ability-model-name">按阶梯计费：</div>
                  <div class="ability-models-container">
                    <table class="level-models">
                      <tr v-for="(item, index) in levelEmun" :key="index">
                        <td>{{ item.minCountNum }}~{{ item.maxCountNum }}次</td>
                        <td
                          ><span>{{ item.salesPrice }}</span
                          >元/次
                        </td>
                      </tr>
                    </table>
                    <div style="color: rgba(0, 0, 0, 0.5); margin-top: 10px"
                      >*计费周期：{{ levelEmun[0].salesSpecifications + levelEmun[0].unit }}</div
                    >
                  </div>
                </div>
                <div
                  class="ability-order-btns"
                  v-if="
                    orderTypesEmun.length !== 0 &&
                    ((orderType === '按次数' && specificsEmun.length !== 0) ||
                      (orderType === '按周期' && periodsEmun.length !== 0) ||
                      (orderType === '按阶梯' && levelEmun.length !== 0))
                  ">
                  <button @click="addCartOrBuy(true)" :disabled="loading">拉取申请</button>
<!--                  <button @click="addCartOrBuy(false)" :disabled="loading">加入购物车</button>-->
                </div>
              </div>
            </div>
            <div class="ability-details" ref="abilityDetails">
              <div class="ability-detail-navs" ref="abilityDetailNavs">
                <ul>
                  <li v-for="item in navList" :key="item.id" :class="{ active: item.isActive }" @click="toggleActive(item)"
                    ><a :href="item.href">{{ item.name }}</a></li
                  >
                </ul>
              </div>
              <div class="ability-new-detail-container">
                <div id="ability-intro" class="ability-headings" style="margin-bottom: 16px" v-if="detailDatas.abilityDescription"
                  >能力介绍
                </div>
                <div class="ability-intro-wrap" v-if="detailDatas.abilityDescription">
                  <p class="text-break" v-html="detailDatas.abilityDescription"></p>
                </div>

                <div
                  id="ability-advantages"
                  class="ability-headings"
                  v-if="detailDatas.advantagesList && detailDatas.advantagesList.length !== 0"
                  style="margin-top: 27px">
                  能力优势
                </div>
                <div class="ability-advantages-wrap" v-if="detailDatas.advantagesList && detailDatas.advantagesList.length !== 0">
                  <div class="ability-advantages-item" v-for="(item, index) in detailDatas.advantagesList" :key="index">
                    <img :src="getImagePath(index)" alt="" />
                    <div class="ability-advantage-name">{{ item.advantageName }}</div>
                    <div class="ability-advantage-detail text-break">
                      {{ item.advantageDescription }}
                    </div>
                  </div>
                </div>

                <div
                  id="ability-functions"
                  class="ability-headings"
                  v-if="abilityFunctions && abilityFunctions.length !== 0"
                  style="margin-top: 27px">
                  能力功能
                </div>
                <div class="ability-functions-wrap" v-if="abilityFunctions && abilityFunctions.length !== 0">
                  <div class="ability-functions-item" v-for="(item,index) in abilityFunctions" :key="index" :class="{odd:index ===abilityFunctions.length - 1}">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.additionals }}</p>
                    <span>0{{index+1}}</span>
                  </div>
                </div>

                <div
                  id="ability-use-cases"
                  class="ability-headings"
                  v-if="detailDatas.usescenarioList && detailDatas.usescenarioList.length !== 0">
                  使用场景
                </div>
                <div
                  class="ability-use-cases-wrap"
                  ref="abilityParents"
                  v-if="detailDatas.usescenarioList && detailDatas.usescenarioList.length !== 0">
                  <div
                    class="ability-use-case"
                    :class="[
                      { active: index === 0 },
                      'ability-use-case' + (index + 1),
                      'ability-use-case-' + detailDatas.usescenarioList.length + '-col'
                    ]"
                    v-for="(item, index) in detailDatas.usescenarioList"
                    :key="index"
                    @mouseover="abilityMouseover(index)">
                    <h1>
                      <span>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-arrow-right"></use>
                        </svg>
                      </span>
                      <span class="text-break">{{ item.usescenarioName }}</span>
                    </h1>
                    <p class="text-break">{{ item.usescenarioDesc }}</p>
                  </div>
                </div>

                <div
                  id="ability-use-examples"
                  class="ability-headings"
                  v-if="useExamples && useExamples.length !== 0"
                  style="margin-top: 27px">
                  使用案例
                </div>
                <div class="ability-use-examples-wrap" v-if="useExamples && useExamples.length !== 0">
                  <div class="ability-use-example-item" v-for="(item,index) in useExamples">
                      <div class="auei">
                        <img src="../../../assets/image/ability/detail/example.png" alt="">
                      </div>
                      <div class="auec">
                        <div>
                          <span>{{ item.name }}</span>
                        </div>
                        <p>
                          {{ item.intro }}
                        </p>
                      </div>

                  </div>
                </div>

                <div
                  id="ability-service-list"
                  class="ability-headings"
                  v-if="detailDatas.serviceList && detailDatas.serviceList.length !== 0">
                  服务列表
                </div>
                <div class="ability-service-list-wrap" v-if="detailDatas.serviceList && detailDatas.serviceList.length !== 0">
                  <table>
                    <thead>
                      <tr>
                        <th>服务中文名称</th>
                        <th>服务ID</th>
                        <th>方法类型</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in detailDatas.serviceList" :key="index">
                        <td>{{ item.srvName }}</td>
                        <td>{{ item.thirdSrvId }}</td>
                        <td class="text-break">{{ item.srvType }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <div id="ability-use-guide" class="ability-headings" v-if="detailDatas.useGuide"> 附件下载</div>
                <div class="ability-use-guide-wrap" v-if="detailDatas.useGuide">
                  <div class="ability-use-guide-item">
                    <div class="icon">
                      <!-- <img :src="useGuideFormatter(useGuideSuffix)" alt="" /> -->
                    </div>
                    <!-- <span>{{ truncateStringWithEllipse(detailDatas.useGuideName, 14) }}</span> -->
                    <a :href="detailDatas.useGuide" target="_blank">
                      <img class="download" src="../../../assets/image/ability/detail/download.png" alt="" />
                    </a>
                  </div>
                </div>

                <div id="ability-related-case" class="ability-headings" v-if="relatedCases && relatedCases.length!==0"> 关联解决方案</div>
                <div class="ability-related-case-wrap" v-if="relatedCases && relatedCases.length!==0">
                  <div class="ability-related-case-item" v-for="(item,index) in relatedCases" :key="index">
                    <div class="ability-related-case-bottom">
                      <h4>{{ item.name }}</h4>
                      <p>{{ item.intro }}</p>
                    </div>
                  </div>
                </div>

                <div id="ability-review-record" class="ability-headings" v-if='reviewRecord && reviewRecord.length'>操作记录</div>
                <div class='ability-review-record-wrap' v-if='reviewRecord && reviewRecord.length'>
                  <el-timeline>
                    <el-timeline-item
                      center
                      placement="top"
                      v-for="(activity, index) in reviewRecord"
                      :key="index"
                      :icon="activity.icon"
                      :type="activity.type"
                      :color="activity.color"
                      :size="activity.size"
                      :hollow="activity.hollow"
                      :timestamp="activity.timestamp"
                    >
                      <div>
                        <h4>{{ activity.status }}</h4>
                        <p>审批意见：{{ activity.comment }}</p>
                      </div>
                    </el-timeline-item>
                  </el-timeline>
                </div>

                <div id="ability-comment" class="ability-headings" v-show="hasComments">评价详情</div>
                <div class="ability-comment-wrap" v-show="hasComments">
                  <comment-list @updateComments="getComments" />
                </div>
              </div>
            </div>
          </div>
          <div class="ability-right">
            <div class="ability-relative-recommend"> 提供单位信息</div>
            <div class="ability-dashed-line"></div>
            <div class="ability-side-recommend-container">
              <div class="ability-provider-infos">
                <span>服务商: </span>
                <span>中国移动河北省公司</span>
              </div>
              <div class="ability-provider-infos">
                <span>联系人: </span>
                <span>陈辉</span>
              </div>
              <div class="ability-provider-infos">
                <span>联系电话: </span>
                <span>151515212222</span>
              </div>
              <div class="ability-provider-infos">
                <span>工作时间: </span>
                <span>周一至周日：早9-晚9</span>
              </div>

            </div>
            <div class="ability-relative-recommend"> 关联推荐</div>
            <div class="ability-dashed-line"></div>
            <div class="ability-side-recommend-container">
              <a
                class="ability-side-recommend-item"
                v-for="(item, index) in detailDatas.suggestList"
                :key="index"
                :href="'/ability/' + item.id">
                <div class="ability-side-item-img">
                  <img :src="item.imageUrl || getDefaultItemImage" alt="" />
                </div>
                <!-- <h4>{{ truncateString(item.abilityName, 12) }}</h4> -->
                <!-- <p v-html="truncateStringWithEllipse(item.abilityAbstract, 28)"></p> -->
              </a>
            </div>
          </div>
        </div>
      </div>
<!--      <div class="side-container">-->
<!--        <div class="side-button" @click="gotoCart()">-->
<!--          <i class="el-icon-shopping-cart-2"></i>-->
<!--          <span>购物车</span>-->
<!--          &lt;!&ndash; <span class="side-badge">{{ $store.getters.cartItems.length }}</span> &ndash;&gt;-->
<!--        </div>-->
<!--        <div class="side-top" v-if="showTopBtn" @click="toTop()">-->
<!--          <i class="el-icon-caret-top"></i>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.text-break img) {
  width: 100%;
}
:deep(.el-breadcrumb__inner.is-link) {
  color: #606266;
  font-size: 14px;
  font-weight: normal;
}

.side-container {
  position: fixed;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 210px;
}

.side-button {
  height: 133px;
  background: #fff;
  box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.16);
  border-radius: 2px 2px 2px 2px;
  padding: 19px;
  text-align: center;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;

  .side-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    background: #f00;
    font-size: 12px;
    border-radius: 100%;
    text-align: center;
    color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  i {
    font-size: 24px;
    color: #3e8efd;
    font-weight: bold;
    margin-bottom: 5px;
  }
}

.side-top {
  width: 60px;
  height: 60px;
  margin-top: 16px;
  background: #fff;
  box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.16);
  border-radius: 2px 2px 2px 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #3e8efd;
  cursor: pointer;
}

.text-break {
  word-break: break-all;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.mar-center {
  width: 1200px;
  margin: 0 auto;
  // overflow: hidden;
}

.ability-detail-container {
  // overflow: hidden;
  background: #f5f7fa;
  position: relative;

  .ability-breadcums {
    padding-top: 20px;
    padding-bottom: 16px;
    font-size: 14px;
  }

  .ability-new-content {
    overflow: hidden;
    display: flex;
    justify-content: space-between;

    .ability-left {
      width: 942px;

      .ability-main {
        background: #fff;
        padding: 18px 24px 90px 18px;
        overflow: hidden;

        .ability-image-area {
          width: 200px;
          //height: 120px;
          float: left;
          margin-right: 16px;

          img {
            width: 200px;
            height: 120px;
          }
        }

        .ability-main-content {
          width: 684px;
          float: left;

          .ability-name {
            font-size: 18px;
            font-family: MiSans-Regular, MiSans-Regular;
            font-weight: normal;
            color: #383e47;
            line-height: 24px;
            .top-tag{
              //margin-left: 15px;
              margin-right: 12px;
              &:first-child{
                margin-left: 15px;
              }
            }
          }

          .ability-desc {
            font-size: 14px;
            font-family: MiSans-Regular, MiSans-Regular;
            font-weight: normal;
            color: #9b9b9b;
            line-height: 22px;
            margin-top: 8px;
          }

          .ability-delivers {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 20px;

            span {
              font-size: 14px;
              font-family: MiSans-Regular, MiSans-Regular;
              font-weight: normal;
              color: #000000;
              line-height: 20px;
            }
          }

          .ability-prices {
            height: 52px;
            background: #f5f7fa;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            margin-top: 20px;
            display: flex;
            align-items: center;
            padding-left: 16px;

            span:nth-of-type(1),
            span:nth-of-type(3) {
              font-size: 14px;
              font-family: MiSans-Regular, MiSans-Regular;
              font-weight: normal;
              color: #000000;
              line-height: 20px;
            }

            span:nth-of-type(2) {
              font-size: 22px;
              font-family: MiSans, MiSans;
              font-weight: 500;
              color: #ff2424;
              line-height: 30px;
              margin-left: 7px;
              margin-right: 7px;
            }
          }

          .order-models {
            margin-top: 24px;
          }

          .ability-models {
            //margin-top: 24px;

            .ability-model-name {
              font-size: 14px;
              font-family: MiSans-Regular, MiSans-Regular;
              font-weight: normal;
              color: #000000;
              line-height: 20px;
            }

            .ability-models-container {
              margin-top: 10px;
              overflow: hidden;

              .ability-model-item {
                width: 109px;
                height: 42px;
                display: inline-block;
                float: left;
                font-size: 14px;
                color: #000;
                line-height: 42px;
                text-align: center;
                border-radius: 5px;
                border: 1px solid #dfe4eb;
                margin-right: 15px;
                margin-bottom: 20px;
                cursor: pointer;
                user-select: none;

                &:nth-of-type(5n) {
                  margin-right: 0;
                }

                &.active {
                  border-color: #3e8efd;
                  border-style: solid;
                  color: #3e8efd;
                }
              }
            }

            .level-models {
              table-layout: fixed;

              tr {
                td:nth-of-type(1) {
                  min-width: 100px;
                }

                span {
                  color: #f00;
                }
              }
            }
          }

          .ability-order-btns {
            overflow: hidden;
            margin-top: 11px;

            button {
              width: 160px;
              height: 42px;
              line-height: 40px;
              text-align: center;
              border-radius: 21px;
              font-size: 16px;
              cursor: pointer;

              &:disabled {
                opacity: 0.5;
                cursor: not-allowed;
              }

              &:nth-of-type(1) {
                color: #fff;
                background: #3e8efd;
                margin-right: 17px;
              }

              &:nth-of-type(2) {
                color: #3e8efd;
                background: #fff;
                margin-right: 17px;
                border: 1px solid #3e8efd;
              }
            }
          }
        }
      }

      .ability-details {
        width: 942px;
        margin-top: 17px;
        //background: #fff;
        .ability-detail-navs {
          background: #fff;
          padding-top: 26px;
          padding-left: 18px;
          padding-bottom: 16px;
          overflow: hidden;
          width: 942px;

          ul {
            white-space: nowrap;
            li {
              //float: left;
              margin-right: 40px;
              display: inline-block;

              a {
                font-size: 18px;
                font-family: MiSans-Regular, MiSans-Regular;
                font-weight: normal;
                color: #383e47;
                line-height: 24px;
              }
            }

            li.active {
              padding-bottom: 8px;

              a {
                color: #3e8efd;
              }

              border-bottom: 2px solid #3e8efd;
            }
          }
        }

        .ability-new-detail-container {
          margin-top: 2px;
          background: #fff;
          padding-top: 33px;
          padding-left: 18px;
          padding-right: 40px;
          padding-bottom: 20px;
          overflow: hidden;
          flex: 1;

          .ability-intro-wrap {
            //height: 243px;
            background: #fff;
            //border-radius: 4px 4px 4px 4px;
            //padding: 24px;
            //margin-bottom: 60px;
            p {
              margin-left: 20px;
              display: inline-block;
              font-size: 14px;
              font-family: MiSans-Regular, MiSans;
              font-weight: 400;
              color: #383e47;
              line-height: 22px;
              vertical-align: top;
            }
          }

          .ability-advantages-wrap {
            overflow: hidden;
            margin-bottom: 60px;

            .ability-advantages-item {
              width: 278px;
              height: 168px;
              background: #f7faff;
              border-radius: 4px 4px 4px 4px;
              float: left;
              padding: 16px;

              img {
                width: 40px;
                height: 40px;
              }

              .ability-advantage-name {
                margin-top: 8px;
                font-size: 18px;
                font-family: MiSans-Regular, MiSans;
                font-weight: 600;
                color: #1d263d;
                line-height: 24px;
              }

              .ability-advantage-detail {
                font-size: 14px;
                font-family: MiSans-Regular, MiSans;
                font-weight: 400;
                color: #747882;
                line-height: 22px;
                margin-top: 8px;
                word-break: break-all;
                overflow: hidden;
              }
            }

            .ability-advantages-item:nth-child(2) {
              margin-left: 16px;
              margin-right: 16px;
            }
          }

          .ability-functions-wrap{
            width: 865px;
            height: 468px;
            background: #F7FAFF;
            border-radius: 4px 4px 4px 4px;
            padding: 26px 16px 21px 15px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .ability-functions-item{
              width: 410px;
              height: 127px;
              position: relative;
              padding: 20px 38px 0 18px;
              background: #FFFFFF;
              &.odd{
                flex-grow: 1;
              }
              &:hover{
                &::before{
                  display: block;
                }
              }
              &::before {
                content: ""; /* 必须有内容才能显示伪元素 */
                position: absolute;
                top: -2px; /* 将伪元素定位到元素上方一像素处 */
                left: 0;
                width: 100%;
                height: 0;
                display: none;
                border-top: 2px solid #3e8efd; /* 设置上方边框样式 */
              }
              h3{
                font-size: 16px;
                font-family: MiSans, MiSans;
                font-weight: 500;
                color: #383E47;
              }
              p{
                font-size: 14px;
                font-family: MiSans-Regular, MiSans-Regular;
                font-weight: normal;
                color: #383E47;
                margin-top: 8px;
                line-height: 21px;
              }
              span{
                display: inline-block;
                width: 48px;
                height: 29px;
                background: #3E8EFD;
                font-size: 16px;
                font-family: MiSans, MiSans;
                font-weight: 600;
                color: #FFFFFF;
                line-height: 29px;
                position: absolute;
                right: 0;
                top: 0;
                text-align: center;
              }
            }
          }

          .ability-use-cases-wrap {
            overflow: hidden;
            margin-bottom: 60px;

            .ability-use-case-1-col.ability-use-case.active {
              width: 100% !important;
            }

            .ability-use-case-2-col.active.ability-use-case:nth-child(1) {
              width: 600px !important;
            }

            .ability-use-case-2-col.ability-use-case:nth-child(1) {
              width: 250px !important;
            }

            .ability-use-case-2-col.ability-use-case:nth-child(2) {
              width: 250px !important;
            }

            .ability-use-case-2-col.active.ability-use-case:nth-child(2) {
              width: 600px !important;
            }

            .ability-use-case1 {
              width: 186px;
              height: 310px;
              padding: 16px;
              background:
                linear-gradient(180deg, #3e8efd 0%, rgba(62, 142, 253, 0) 100%),
                url('../../../assets/image/ability/detail/bg3.png') no-repeat center center/cover;

              &.active {
                //background:url("../../../assets/image/ability/detail/bg3.png");
              }
            }

            .ability-use-case2 {
              width: 186px;
              height: 310px;
              padding: 16px;
              margin-left: 16px;
              margin-right: 16px;
              background:
                linear-gradient(180deg, #236cdb 0%, rgba(62, 142, 253, 0) 100%),
                url('../../../assets/image/ability/detail/bg2.png') no-repeat center center/cover;

              &.active {
                //opacity: .8;
                //background:url("../../../assets/image/ability/detail/bg2.png");
              }
            }

            .ability-use-case3 {
              width: 186px;
              height: 310px;
              padding: 16px;
              background:
                linear-gradient(179deg, #00cccc 0%, rgba(62, 142, 253, 0) 100%),
                url('../../../assets/image/ability/detail/bg1.png') no-repeat center center/cover;

              //&.active {
              //  background: url("../../../assets/image/ability/detail/bg1.png");
              //}
            }

            .ability-use-case.active {
              width: 480px;
              opacity: 0.9;

              h1 {
                span {
                  color: #fff;
                }
              }

              p {
                width: 80%;
                color: #fff;
              }
            }

            .ability-use-case {
              float: left;
              position: relative;
              transition:
                width 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out;

              h1 {
                span {
                  font-size: 18px;
                  color: #ffffff;
                  line-height: 24px;
                  font-weight: 400;
                }

                span:nth-child(2) {
                  margin-left: 8px;
                }
              }

              p {
                width: 164px;
                margin-top: 8px;
                font-size: 14px;
                font-family: MiSans-Regular, MiSans;
                font-weight: 400;
                color: #ffffff;
                line-height: 22px;
              }
            }
          }

          .ability-use-examples-wrap{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .ability-use-example-item{
              display: flex;
              justify-content: space-between;
              margin-bottom: 40px;
              .auei{
                width: 130px;
                height: 240px;
              }
              .auec{
                width: 267px;
                margin-left: 16px;
                div{
                  height: 31px;
                  border-bottom: 1px solid #707070;
                  span{
                    font-size: 16px;
                    font-family: MiSans, MiSans;
                    font-weight: 500;
                    color: #383E47;
                    line-height: 32px;
                    border-bottom: 2px solid #f00;
                    padding-bottom: 2px;
                  }
                }
                p{
                  margin-top: 13px;
                  font-size: 14px;
                  font-family: MiSans-Regular, MiSans-Regular;
                  font-weight: normal;
                  color: #383E47;
                  line-height: 26px;
                }
              }
            }
          }

          .ability-service-list-wrap {
            overflow: hidden;
            margin-bottom: 60px;

            table {
              width: 100%;

              thead {
                tr {
                  height: 46px;
                  background: #3e8efd;

                  th {
                    text-align: left;
                    padding: 10px 16px;
                    font-size: 16px;
                    font-family: MiSans-Medium, MiSans;
                    font-weight: 500;
                    color: #ffffff;
                    line-height: 26px;
                    border-right: 1px solid #ffffff;
                  }
                }
              }

              tbody {
                tr {
                  height: 46px;
                  background: #fff;

                  td {
                    text-align: left;
                    padding: 10px 16px;
                    font-size: 16px;
                    color: #383e47;
                    font-family: MiSans-Medium, MiSans;
                    font-weight: 400;
                    opacity: 1;
                    border: 1px solid #eef1f7;
                  }
                }
              }
            }
          }

          .ability-use-guide-wrap {
            overflow: hidden;
            margin-bottom: 60px;

            .ability-use-guide-item {
              width: 271px;
              background: #f5f7fa;
              padding: 12px 18px 13px 14px;
              position: relative;
              margin-right: 16px;
              float: left;

              .icon {
                display: inline-block;
                width: 27px;
                height: 27px;
              }

              span {
                font-size: 14px;
                font-family: MiSans-Regular, MiSans-Regular;
                font-weight: normal;
                color: #000000;
                line-height: 20px;
                vertical-align: super;
                margin-left: 5px;
              }

              .download {
                vertical-align: super;
                position: absolute;
                right: 12px;
                top: 20px;
                cursor: pointer;
              }
            }
          }

          .ability-related-case-wrap{
          display: flex;
          justify-content: space-between;
            width: 864px;
          .ability-related-case-item{
            width: 420px;
            height: 220px;
            position: relative;
            background: url("../../../assets/image/ability/detail/relatedbg.png") no-repeat;
            .ability-related-case-bottom{
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background: #000000;
              border-radius: 0px 0px 0px 0px;
              opacity: 0.6;
              padding: 5px 9px 4px 8px;
              h4{
                font-size: 16px;
                font-family: MiSans, MiSans;
                font-weight: 500;
                color: #FFFFFF;
              }
              p{
                font-size: 14px;
                font-family: MiSans-Regular, MiSans-Regular;
                font-weight: normal;
                color: #FFFFFF;
                margin-top: 2px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          }
        }
      }
    }

    .ability-right {
      width: 244px;
      margin-left: 14px;

      .ability-relative-recommend {
        height: 52px;
        background: linear-gradient(180deg, #3e8efd 0%, rgba(62, 142, 253, 0) 100%);
        font-size: 14px;
        font-family: MiSans-Regular, MiSans-Regular;
        font-weight: normal;
        color: #ffffff;
        line-height: 52px;
        text-align: center;
        //border-bottom: 1px solid #3F8FFD;
      }

      .ability-dashed-line {
        height: 1px;
        opacity: 0.2;
        background: #3f8ffd;
      }

      .ability-side-recommend-container {
        background: #fff;
        padding: 16px 22px;
        margin-bottom: 14px;
        .ability-provider-infos{
          span:first-child{
            font-size: 12px;
            font-family: MiSans-Regular, MiSans-Regular;
            font-weight: normal;
            color: #9B9B9B;
            line-height: 25px;
            display: inline-block;
            width: 60px;
          }
          span:last-child{
            font-size: 12px;
            font-family: MiSans-Regular, MiSans-Regular;
            font-weight: normal;
            color: #000000;
            line-height: 25px;
          }
        }

        .ability-side-recommend-item {
          display: block;
          margin-bottom: 30px;

          .ability-side-item-img {
            width: 200px;
            height: 120px;
            overflow: hidden;

            img {
              width: 200px;
              height: 120px;
            }
          }

          h4 {
            font-size: 16px;
            font-family: MiSans-Regular, MiSans-Regular;
            font-weight: normal;
            color: #383e47;
            line-height: 22px;
            margin: 9px 0 4px 0;
          }

          p {
            font-size: 14px;
            font-family: MiSans-Regular, MiSans-Regular;
            font-weight: normal;
            color: #9b9b9b;
            line-height: 22px;
            word-break: break-all;
          }
        }
      }
    }
  }

  .ability-detail-content::after {
    content: '';
    display: table;
    clear: both;
  }
}

.ability-headings {
  height: 24px;
  font-size: 18px;
  font-family: MiSans-Regular, MiSans;
  font-weight: normal;
  color: #383e47;
  line-height: 24px;
  margin-top: 15px;
  padding-left: 20px;
  margin-bottom: 22px;
  scroll-margin-top: 150px;
  background: url('../../../assets/image/ability/detail/arrow.png') no-repeat left center;
}
</style>
